<script setup lang="ts">
defineOptions({
  name: "search"
});
import { ref, reactive, onMounted } from "vue";
import { Search } from "@px-ui/icons-vue";
import { useThrottleFn } from "@vueuse/core";
import { throttleDelay as delay } from "@/utils/constant";
import dayjs from "dayjs";

const emits = defineEmits(["submit", "reset"]);

const searchFormRef = ref<CommonSearch.SearchFormRefType>(null);

const defaultTime = [dayjs().subtract(6, "day").startOf("date").format("YYYY-MM-DD HH:mm:ss"), dayjs().endOf("date").format("YYYY-MM-DD HH:mm:ss")];
const commonSearchForm = reactive<Record<string, any>>({
  timePeriod: "day",
  date: defaultTime
});

const option = [
  {
    value: "day",
    label: "天"
  },
  {
    value: "hour",
    label: "时"
  },
  {
    value: "minutes",
    label: "分"
  }
];

const choiceDate = ref<number | null>(null);

const disabledDateFn = (date: any) => {
  if (choiceDate.value) {
    switch (commonSearchForm.timePeriod) {
      case "day":
        return Math.abs(dayjs(date).diff(choiceDate.value, "day")) > 59;
      case "hour":
        return Math.abs(dayjs(date).diff(choiceDate.value, "hour")) > 59;
      case "minutes":
        return Math.abs(dayjs(date).diff(choiceDate.value, "minute")) > 59;
      default:
        return true;
    }
  }
};

const calendarChangeHandler = (date: any) => {
  const [min, max] = date;
  choiceDate.value = min.getTime();
  if (max) choiceDate.value = null;
};

const getFormParams = () => {
  const { timePeriod, date } = commonSearchForm;
  let [startTime, endTime] = date;
  startTime = startTime ? startTime : "";
  endTime = endTime ? endTime : "";
  return { timePeriod, startTime, endTime };
};

const timePeriodChangeHandler = (val: any) => {
  switch (val) {
    case "day":
      commonSearchForm.date = [
        dayjs().subtract(59, "day").startOf("date").format("YYYY-MM-DD HH:mm:ss"),
        dayjs().endOf("date").format("YYYY-MM-DD HH:mm:ss")
      ];
      break;
    case "hour":
      commonSearchForm.date = [
        dayjs().subtract(59, "hour").startOf("date").format("YYYY-MM-DD HH:mm:ss"),
        dayjs().endOf("date").format("YYYY-MM-DD HH:mm:ss")
      ];
      break;
    case "minutes":
      commonSearchForm.date = [
        dayjs().subtract(59, "minute").startOf("date").format("YYYY-MM-DD HH:mm:ss"),
        dayjs().endOf("date").format("YYYY-MM-DD HH:mm:ss")
      ];
      break;
    default:
      commonSearchForm.date = [
        dayjs().subtract(59, "minute").startOf("date").format("YYYY-MM-DD HH:mm:ss"),
        dayjs().endOf("date").format("YYYY-MM-DD HH:mm:ss")
      ];
      break;
  }
};

const throttleSubmit = useThrottleFn(async () => {
  emits("submit", getFormParams());
}, delay);

const throttleReset = useThrottleFn(() => {
  commonSearchForm.timePeriod = "day";
  commonSearchForm.date = [
    dayjs().subtract(6, "day").startOf("date").format("YYYY-MM-DD HH:mm:ss"),
    dayjs().endOf("date").format("YYYY-MM-DD HH:mm:ss")
  ];

  emits("reset", getFormParams());
}, delay);

onMounted(async () => {
  emits("submit", getFormParams(), true);
});
</script>

<template>
  <px-form ref="searchFormRef" class="common-search-form" :model="commonSearchForm">
    <px-row :gutter="24">
      <px-col :span="5">
        <px-form-item label="时间粒度" prop="timePeriod">
          <px-select v-model="commonSearchForm.timePeriod" placeholder="请选择时间粒度" @change="timePeriodChangeHandler">
            <px-option v-for="s in option" :key="s.value" :label="s.label" :value="s.value" />
          </px-select>
        </px-form-item>
      </px-col>

      <px-col :span="8">
        <px-form-item label="时间范围" prop="date">
          <px-date-picker
            v-model="commonSearchForm.date"
            type="datetimerange"
            :editable="false"
            placeholder="请选择时间范围"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="defaultTime"
            :disabled-date="disabledDateFn"
            @calendar-change="calendarChangeHandler"
          />
        </px-form-item>
      </px-col>

      <px-col :span="4">
        <px-form-item class="search-btn-form-item">
          <div>
            <px-button type="primary" :icon="Search" @click="throttleSubmit">查询</px-button>
            <px-button @click="throttleReset">重置</px-button>
          </div>
        </px-form-item>
      </px-col>
    </px-row>
  </px-form>
</template>

<style lang="scss" scoped>
.common-search-form {
  gap: 16px;

  .px-row {
    row-gap: 16px;
    margin-right: 0 !important;
  }

  :deep(.px-form-item) {
    margin-bottom: 0;

    &:not(.search-btn-form-item) {
      overflow: hidden;
      border: 1px solid #dcdcdc;
      border-radius: 4px;
    }

    .px-form-item__label {
      padding: 0 14px;
      color: #555;
      background-color: #f0f2f5;
    }

    .px-form-item__content {
      .px-input,
      .px-select,
      .px-date-picker,
      .px-time-picker,
      .px-tree-select {
        width: 100%;
      }

      .px-input__wrapper {
        border: none;

        &.is-focus {
          border: none;
          box-shadow: none;
        }
      }

      .px-input__icon.px-range__icon,
      .px-input__prefix {
        display: none;
      }

      .px-date-editor .px-range-input {
        width: 46%;
      }
    }
  }
}
</style>
